<template>
	<view>
	<view class="header">
		<text id='titlef' @click="back">返回</text>
		<text id='title'>用水抄表</text>
	</view>
	
	<view class="sb">
		<view>
			<text>水表号:</text>
			<text class="number">{{showInfo.sb_num}}</text>
		</view>
		<view>
			<text class="title">抄表顺序:</text>
			<text>{{showInfo.cb_id}}</text>
		</view>
	</view>
	
	<view>
		<text class="th">退回原因</text>
	</view>
	<input class="thinp" type="text" :value="tuihuiyuanying"  	placeholder='带出不可修改'/>
	
	<view>
		<text class="bz">备注</text>
	</view>
	<view>
	<input class="bzinp" type="text" :value="beizhu"  	placeholder='带出不可修改'/>
	</view>
	
	
	<view class="contet">
		<text>定位</text>
		<text id="dw" @click=" getnow">定位</text>
	</view>
	
	<view class="content2">
		<view class="coninp"><input type="text" v-model="form.address" placeholder='带出不可修改' /></view>
		<view class="nr">
			<text>地址:</text>
		<input type="text" :value="address" placeholder='带出不可修改' class="adressInp" />
			
		</view>
		<view class="bk">
			<text>表况:{{array[index]}}</text>
			
			<view >
				<picker @change="bindPickerChange" mode="selector" :value="index" :range="array">选择表况</picker>
			</view>
		</view>
		
		<view class="nr">
			<text>上次抄表日期:</text>
			<input type="text" :value="shangcitime" placeholder='带出不可修改' class="adressInp" />
		</view>
		<view class="nr">
			<text>上次抄表水量:</text>
			<input type="text" :value="shangciWater" placeholder='带出不可修改' class="adressInp" />
		</view>
		<view class="nr">
			<text>正常用水范围:</text>
			<input type="text" :value="fanwei" placeholder='带出不可修改' class="adressInp" />
		</view>
		<view class="nr">
			<text>倍率:</text>
			<input type="text" :value="beilv" placeholder='带出不可修改' class="adressInp" />
		</view>
		<view class="nr">
			<text>上次抄表数:</text>
			<input type="text" value="shangcichaobiao" placeholder='带出不可修改' class="adressInp" />
		</view>
		<view class="nr">
			<text>本次抄表数:</text>
			<input type="text" :value="bencichaobiao" placeholder='带出不可修改' class="adressInp" />
		</view>
		<view class="nr">
			<text>水量:</text>
			<input type="text" :value="shuiliang" placeholder='带出不可修改' class="adressInp" />
		</view>
	 
	 <view>
	 	现场照片
	 </view>
	<view class="img">
		<view >
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<view >
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<view >
			<image src="../../static/logo.png" mode=""></image>
		</view>
	</view>
	
	<button >确定</button>
	</view> 
	</view>
	
</template>

<script>
	import {ref,toRefs,reactive,onMounted,computed}from 'vue'
	import{mapState,useStore} from 'vuex'
	import getLocation from '../../utils/getLocation.js'
	export default {
		setup(){
			const{state,getters,commit,dispatch}=useStore();
			let data=reactive({
				form:{
					address:''
				},
				 index: 0,
				 beizhu:'',
				 address:'',
				 shangcitime:'',
				 dingwei:'',
				 shangciWater:'2000',
				 fanwei:'',
				 beilv:'2',
				 shangcichaobiao:'3000',
				 shuiliang:'600',
				 bencichaobiao:'4000',
				 tuihuiyuanying:'',
				array: ['针偏', '表蒙', '表破烂', '正常','针故障','反转','反装','关门','堆物','换表'],
				 bindPickerChange: function(e) {
				    console.log(e)
				   
				     data.index= e.detail.value
				   
				  },
				  back:()=>{
					   console.log(1)
					  uni.navigateTo({
					  	url: './todolist'
					  });
				  },
				 getnow() {
				     getLocation(data.form,'address')
				 },
				showInfo:computed(()=>state.chaobiao.todolistInfo),
				
			
			
				
			})
			onMounted(()=>{
				data.beizhu=data.showInfo.cb_beizhu,
				data.address=data.showInfo.cb_dizhi,
				data.shangcitime=data.showInfo.cb_shangcitime,
				data.form.address=data.showInfo.cb_dingwei,
				data.fanwei=data.showInfo.cb_fanwei,
				console.log(data.showInfo)
			})
			return {...toRefs(data)}
		}
	}
</script>

<style>
	.bk{
		display: flex;
		justify-content: space-between;
		border: 1rpx solid black;
		height: 150rpx;
		line-height: 150rpx;
	}
	button{
		width: 300rpx;
	background-color: #007AFF;
	}
	.img{
		display: flex;
		justify-content: space-around;
	}
	image{
		height: 150rpx;
		width: 150rpx;
	}
	.nr{
		border: 1rpx solid black;
		height: 150rpx;
		line-height: 150rpx;
	}
	
	.contet{
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		align-items: center;
	}
	.coninp{
		border: 1rpx solid black;
		height: 80rpx;
	}
	#dw{color: #007AFF;}
	
	.thinp{
		height: 220rpx;
		border: 1rpx solid black;
		border-radius: 20rpx;
		
	}
	.bzinp{
		height: 120rpx;
		border: 1rpx solid black;
		border-radius: 20rpx;

	}
	.adressInp{
		height:150rpx;
		border: 1rpx solid black;
		width: 70%;
	
	}
	.sb{
		display: flex;
		justify-content:space-between;
		border: 1rpx solid black;
		height: 120rpx;
		align-items:center
	}
	.number{
		margin-left: 38rpx;
	}
	.title{margin-right: 38rpx;}
.header {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		height: 100rpx;

		align-items: center
	}

	#titlef {
		color: #3C9CFF;
		margin-left: 30rpx;
	}
#title {
		position: absolute;
		left: 295rpx;

	}
	.nr{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
